<template>
  <div class="component-library-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">组件库</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新建组件
          </el-button>
        </div>
      </template>

      <!-- 分类标签 -->
      <div class="category-tabs">
        <el-tag
          v-for="category in categories"
          :key="category.value"
          :type="selectedCategory === category.value ? 'primary' : 'info'"
          class="category-tag"
          @click="selectedCategory = category.value"
        >
          {{ category.label }}
        </el-tag>
      </div>

      <!-- 组件列表 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6" v-for="component in filteredComponents" :key="component.id">
          <el-card class="component-card" shadow="hover">
            <div class="component-preview">
              <el-icon style="font-size: 48px; color: #409eff;">
                <component :is="component.icon" />
              </el-icon>
            </div>
            <div class="component-info">
              <h3>{{ component.name }}</h3>
              <p class="component-desc">{{ component.description }}</p>
              <div class="component-meta">
                <el-tag size="small">{{ component.category }}</el-tag>
                <el-tag size="small" type="success">v{{ component.version }}</el-tag>
              </div>
              <div class="component-stats">
                <span><el-icon><View /></el-icon> {{ component.views }}</span>
                <span><el-icon><Download /></el-icon> {{ component.downloads }}</span>
              </div>
            </div>
            <div class="component-actions">
              <el-button type="primary" size="small" @click="handleUse(component)">
                使用
              </el-button>
              <el-button size="small" @click="handleEdit(component)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(component)">
                删除
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, View, Download, Box, DataLine, Grid } from '@element-plus/icons-vue'

const selectedCategory = ref('all')

const categories = [
  { label: '全部', value: 'all' },
  { label: '基础组件', value: 'basic' },
  { label: '业务组件', value: 'business' },
  { label: '图表组件', value: 'chart' },
  { label: '表单组件', value: 'form' }
]

const components = ref([
  {
    id: 1,
    name: '数据卡片',
    description: '用于展示统计数据的卡片组件',
    category: '基础组件',
    icon: 'Box',
    version: '1.0.0',
    views: 1234,
    downloads: 456
  },
  {
    id: 2,
    name: '趋势图',
    description: '带趋势指标的折线图组件',
    category: '图表组件',
    icon: 'DataLine',
    version: '1.2.0',
    views: 876,
    downloads: 234
  },
  {
    id: 3,
    name: 'CRUD表格',
    description: '完整的增删改查表格组件',
    category: '业务组件',
    icon: 'Grid',
    version: '2.0.0',
    views: 2345,
    downloads: 789
  }
])

const filteredComponents = computed(() => {
  if (selectedCategory.value === 'all') {
    return components.value
  }
  return components.value.filter(c => c.category === selectedCategory.value)
})

const handleAdd = () => {
  ElMessage.info('新建组件功能开发中...')
}

const handleUse = (component) => {
  ElMessage.success(`正在使用组件: ${component.name}`)
}

const handleEdit = (component) => {
  ElMessage.info(`编辑组件: ${component.name}`)
}

const handleDelete = (component) => {
  ElMessage.success(`删除组件: ${component.name}`)
}
</script>

<style scoped>
.component-library-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-tag {
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
}

.component-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.component-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.component-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 15px;
  color: white;
}

.component-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.component-desc {
  color: #606266;
  font-size: 14px;
  margin: 0 0 10px 0;
  min-height: 40px;
}

.component-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.component-stats {
  display: flex;
  gap: 15px;
  color: #909399;
  font-size: 13px;
  margin-bottom: 15px;
}

.component-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.component-actions {
  display: flex;
  gap: 10px;
}

.component-actions .el-button {
  flex: 1;
}
</style>

